<script setup lang="ts">
import {ref, defineProps, defineEmits} from 'vue'
import {changeStr} from "@/config";

const {title,cover,blurb,background,width,height,fontSize} = defineProps<{
  title?:string|null,
  cover?:string|null,
  blurb?:string|null,
  background?:string|null,
  width?: string | number,
  height?: string | number,
  fontSize?:string | number,
}>()
const emit = defineEmits<{
  click: []
}>()
const handelClick = () => {
  emit('click')
}
</script>

<template>
  <div class="book container-note" :style="{width:`${changeStr(width)||'220px'}`,height:`${changeStr(height)||'300px'}`}" @click="handelClick">
<!--    简介-->
    <p class="info-blurb" :style="{fontSize:changeStr(fontSize)}">{{blurb || '暂无简介'}}</p>
<!--    标题-->
    <div class="cover" :style="{
      background:`${background||'rgba(250,250,250,0.8)'} url('${cover||'http://localhost:5173/linter/src/assets/image/Linter.png'}') no-repeat center / 100%`,
      opacity:'0.9',
      backdropFilter: 'blur(12px)'
    }">
      <p class="title">{{title || '未命名'}}</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.book {
  position: relative;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 1px 1px 12px #a185d9;
  box-shadow: 1px 1px 10px rgba(136, 158, 207, 0.2);
  -webkit-transform: preserve-3d;
  transform: preserve-3d;
  -ms-transform: preserve-3d;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #000;
  transition: all 0.5s;
  .title {
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    color: #00244e;
  }
  .info-blurb{
    font-size: 15px;
    color: #00244e;
  }
  &:hover{
    transition: all 0.5s;
    transform: scale(1.05);
  }
}
.container-note{
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-image: linear-gradient(#ffffff 1.1rem, #ccc 1.2rem);
  background-size: 100% 1.2rem;
}
.cover {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
  //-webkit-box-shadow: 1px 1px 12px #000;
  //box-shadow: 1px 1px 12px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.book:hover .cover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  box-shadow: 0 13px 15px -11px rgba(136, 158, 207, 0.2);
  -webkit-transform: rotatey(-80deg);
  -ms-transform: rotatey(-80deg);
  transform: rotatey(-80deg);
}


</style>
